Truncating Text with Ellipsis in CSS
CSS provides a way to truncate overflowing text and display an ellipsis (...) using a combination of properties. This is especially useful for fixed-width containers or UI elements like cards, buttons, or table cells.
white-space: nowrap;– Prevents text from wrapping to a new line.overflow: hidden;– Hides any text that overflows the container.text-overflow: ellipsis;– Displays an ellipsis (…) for the clipped text.
In this example, any text exceeding 200px will be truncated with an ellipsis. The nowrap ensures the text stays on a single line, while overflow: hidden hides the extra text.
For multi-line ellipsis, use
display: -webkit-box;,-webkit-line-clamp: N;and-webkit-box-orient: vertical;along withoverflow: hidden.Ensure the container has a fixed width for the ellipsis to appear correctly.
Combine with
titleattribute on the element to show full text on hover for better accessibility.
Use
text-overflow: ellipsisfor clean truncation in single-line text.Combine with
nowrapandoverflow: hiddenfor proper effect.Multi-line truncation requires
-webkit-line-clampand flexbox-like behavior.Always provide a way to see full text, such as tooltips or expandable sections, for accessibility.